<template>
    <!-- 秀场页 -->
    <div id="show_container">
        <JHB :jhb_info="jhb_info" :wakeupParam="callApp"></JHB>
       <div id="show_head">
            <author3 :info="channelInfo" :vcount="programInfo.viewCount"></author3>
        </div>
        <div id="show_banner">
            <video  class="video-js vjs-big-play-centered" id="video_" x5-playsinline="true" webkit-playsinline="true" playsinline="true" controls controlsList="nodownload">
            </video>
        </div>
      <!-- <div id="show_banner_msg">
            {{programInfo.programName}}
            <span class="show-label live-label-prev" v-if="programInfo.status==1"><img src="../../assets/images/live_preview.png" /></span>
            <span class="show-label live-label-now" v-if="programInfo.status==2"><img src="../../assets/images/live_onlive.png" /></span>
            <span class="show-label live-label-next" v-if="programInfo.status==3"><img src="../../assets/images/live_review.png" /></span>
        </div>-->
        <div id="wrapper">
            <!--<div id="democon"></div>-->
            <remarknew v-if="usecomtype==2" :topicid="programInfo.topicid" :reportData="commentReportData" :comtype="'chat'"
                       @change3="getCounter" :isRealtime="isRealtime"></remarknew>
            <remarkold v-if="usecomtype==1" :params="paramValue" :reportData="commentReportData"
                       @change2="getCounter"></remarkold>
            <div class="edit-takeup"></div>
        </div>
        <div class="fixedBottom" v-show="layerDisplay">
            <sharedark @close="getVal" :wakeup-param="callApp"></sharedark>
        </div>
        <div class="takeup" v-show="layerDisplay"></div>
    </div>
</template>

<script>
    import qs from "querystring";
    var player;
    export default {
        components: {
            JHB: function (resolve) {
                require(["../../components/jhb.vue"], resolve);
            },
            Author3: function (resolve) {
                require(["../../components/author3.vue"], resolve);
            },
            Banner: function (resolve) {
                require(["../../components/banner.vue"], resolve);
            },
            Sharedark: function (resolve) {
                require(["../../components/share_dark.vue"], resolve);
            },
            Remarknew: function (resolve) {
                require(["../../components/remark_new_2.vue"], resolve);
            },
            Remarkold: function (resolve) {
                require(["../../components/remark_old.vue"], resolve);
            },
        },
        data: function () {
            return {
                jhb_info:{
                    contentId:this.$route.params.programid,
                    contentType:2
                },
                usecomtype: 0,//评论使用新旧系统1:旧 2:新
                channelInfo: {},
                programInfo: {},

                remarkNum: 0,
                remarkData: [],

                layerDisplay: {
                    type: Boolean,
                    default: true
                },
                callApp: {
                    contentType: 2,
                    contentParam: this.$route.params.programid
                },
//                thetopicid: "",
                paramValue: {
                    businessType: "program",
                    activityId: this.$route.params.channelid,   // 177555
                    roleType: "0",
                    programId: this.$route.params.programid,    // 40288db463f2ba5e0163f713841302aa
                    preChatId: "0",
                },
                // time: 1,    // 需要上报的时间参数
                // timer: {},  // 计时器函数对象,
                commentReportData: {},  // 评论需要上报的数据
                sTime: 0,
                isCounter: true,
                isRealtime:true,
            }
        },
        mounted: function () {
            let that = this;

            // 频道信息
            this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                    qs.stringify({
                        params: JSON.stringify({
                            channelId: this.$route.params.channelid
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
            ).then((response) => {
               /* // 404重定向
                if (response.data.state === 2012)
                    this.$router.push("/yfs/Dnf");*/

                this.channelInfo = response.data.data;
                // console.log("+++++++++++++++++++++++++++");
                // console.log(JSON.stringify(this.channelInfo, undefined, 2));
                // console.log("+++++++++++++++++++++++++++");


            });

            // 直播信息
            this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getProgramDetail",
                    qs.stringify({
                        params: JSON.stringify({
                            programId: this.$route.params.programid     // 40288db463fc10af0163fd4fb34b02cf
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
            ).then((response) => {
                //404
                if (response.data.state == 2016){
                    window.location.href = "//"+window.location.host+"/yfs/Dnf";
                    return false;
                }
                that.programInfo = response.data.data;
                that.paramValue.contenturl = window.location.href;
                that.paramValue.contenttitle = that.programInfo.shareTitle;
                // console.log("++++++++++++++++++++++++++++++++++");
                //console.log(JSON.stringify(this.programInfo, undefined, 2));
                //console.log("++++++++++++++++++++++++++++++++++");
                //console.log(typeof(that.programInfo.videoList[0].embodyPlayUrl)!='undefined');
                // 设置新播放器
                 player = videojs('video_', {
                    muted: false,	//是否静音
                    controls: true, //是否显示控制条
                    autoplay: false, //自动播放
                    poster: that.programInfo.videoList ? that.programInfo.videoList[0].stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png",//视频播放前剧照封面图
                    sources: [{
                        src:that.programInfo.videoList && that.getHlsUrl((typeof(that.programInfo.videoList[0].embodyPlayUrl)!='undefined')?that.programInfo.videoList[0].embodyPlayUrl:that.programInfo.videoList[0].playUrl),
                    }],//播放源
                });
           /*     let dp = new DPlayer({
                    container: document.getElementById("show_banner"),
//                    screenshot: true,
                    autoplay: false,
                    live:that.programInfo.status == 2,
                    video: {
                        url: that.programInfo.videoList && that.getHlsUrl((typeof(that.programInfo.videoList[0].embodyPlayUrl)!='undefined')?that.programInfo.videoList[0].embodyPlayUrl:that.programInfo.videoList[0].playUrl),
                        // programInfo.videoList && programInfo.videoList[0].stills + '?cmd=imageprocess/processtype/2/quality/100/width/414'
                        pic: that.programInfo.videoList ? that.programInfo.videoList[0].stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png",
                        thumbnails: that.programInfo.videoList ? that.programInfo.videoList[0].stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png"
                    },
                });*/
           //   $(".dplayer-video-wrap video").attr("x5-video-orientation","portrait");
             //  $(".dplayer-video-wrap video").removeAttr("x5-playsinline");
                if (this.programInfo.shareContent == "" || "上【扬帆】客户端参与互动交流") {
                    this.programInfo.shareContent = "非常有料的直播，已经有" + this.simpleNum(this.programInfo.viewCount) + "人观看，千万不要错过哦~"
                }
                // 修改页面信息
                let meta = {
                    title: this.programInfo.shareTitle,
                    content: this.programInfo.shareContent,
                    name: this.programInfo.programName
                };
                // console.log(meta);
                this.createMetaInfo(meta);
                this.freshTitles(this.programInfo.shareTitle);
                function doAccessprogram() {
                    let actionType = "accessprogram";
                    let behaviorData = {
                        "uid": "",
                        "username": "",
                        "ip":"",
                        "tagid": "",
                        "contentid": that.$route.params.programid,
                        "imei": "",
                        "extendtag": "",
                        "type": "programme_3",
                        "contenttype": "programme",
                        "opertime": that.toFullTime(),
                        "contentname": that.programInfo.programName,
                        "channelid": that.$route.params.channelid,

                    };
                    shareUrlReport(behaviorData, actionType);
                }

                doAccessprogram();
                // 评论comment行为
                this.commentReportData = {
                    uid: "",
                    username: "",
                    tagid: "",
                    contentid: that.$route.params.programid,
                    imei: "",
                    openid: "",
                    ip: "",
                    name: that.programInfo.programName,
                    extendtag: "",
                    type: "channel_3",
                    contenttype: "channel",
                    opertime:  that.toFullTime(),
                    channelid: that.$route.params.channelid
                };
                // console.log(JSON.stringify(this.commentReportData, undefined, 2));

//                this.thetopicid = this.programInfo.liveRoomTopicid;
setTimeout(function(){
    // 监听播放事件：获取对象
    let media = document.getElementById("video__html5_api");


    // 触发计时器
    let goTimer = function () {
        if (that.isCounter) {
            //    document.getElementsByClassName("dplayer-full-icon")[0].click();
            //  launchFullScreen();

            that.sTime = Math.round(new Date().getTime() / 1000);
            that.isCounter = false;
            doPlay();
        }
    };
    media.addEventListener("play", goTimer, false);
    // 触发观看视频play行为
    function doPlay() {
        let actionType = "play";
        let behaviorData = {
            uid: "",
            username: "",
            ip: "",
            openid: "",
            contentid: that.$route.params.programid,
            playurl: that.programInfo.videoList[0].playUrl,
            imei: "",
            name: that.programInfo.programName,
            extendtag: "",
            contenttype: "programme",
            type: "programme_2",
            opertime:  that.toFullTime(),
            channelid: that.$route.params.channelid
        };
        shareUrlReport(behaviorData, actionType);
    }
},500)


                // 二次分享+统计用户的share行为
                window.initShareConfig = initShareConf(
                        that.programInfo.shareTitle,
                        that.programInfo.shareContent,
                        that.programInfo.shareImg,
                        window.location.href,
                        {
                            uid: "",
                            username: "",
                            opertime: that.toFullTime(),
                            imei: "",
                            openid: "",
                            ip: "",
                            channelid: that.$route.params.channelid,
                            contentid: that.$route.params.programid,
                            name: that.programInfo.programName,
                            contenttype: "programme",
                            type: "programme_2",
                            tagid: "",
                            extendtag: "",
                            sharetype: "weixin",
                            shareurl: window.location.href
                        }
                );


                this.axios.get(
                   /* "https://yfhefei.butel.com:44335/setsail/external/externalService?service=getParameterList&params={'keys':'oldCommentLink'}"*/
                  interbaseUrl
                    + "setsail/external/externalService?service=getParameterList&params={'keys':'oldCommentLink'}")
                    .then((response) => {
                        let oldCommentLink = response.data.data.rows[0].value;
                        if (oldCommentLink == "true") {
                            that.usecomtype = 1;
                        } else if (oldCommentLink == "false" &&
                            (that.programInfo.topicid == ""
                                || typeof(that.programInfo.topicid) == "undefined"
                                || that.programInfo.topicid == null)) {
                            that.usecomtype = 1;
                        }
                        if(oldCommentLink == "false" &&
                            !(that.programInfo.topicid == "")
                                && !(typeof(that.programInfo.topicid) == "undefined")
                                && !(that.programInfo.topicid == null)){
                            that.usecomtype = 2;
                        }
                  //      alert("oldCommentLink:"+oldCommentLink+";usecomtype:"+that.usecomtype);
                    });
            });

        },

        beforeDestroy: function () {
            let that = this;
            player.dispose();
            // 播放时长duration行为
            let playTime = Math.round(new Date().getTime() / 1000) - that.sTime;

            function doDuration() {
                let actionType = "duration";
                let behaviorData = {
                    uid: "",
                    username: "",
                    imei: "",
                    ip: "",
                    openid: "",
                    opertime: that.toFullTime(),
                    channelid: that.$route.params.channelid,
                    contentid: that.$route.params.programid,
                    name: that.programInfo.programName,
                    playurl: window.location.href,
                    playtime: playTime,
                    // playurl: that.programInfo.videoList[0].playUrl,
                    // playtime: that.programInfo.videoList[0].duration,
                    contenttype: "programme",
                    type: "programme_2",
                    extendtag: "",
                    tagid: ""
                };
             //   console.log(behaviorData);
                shareUrlReport(behaviorData, actionType);
                clearTimeout(that.timer);
            }

            doDuration();

        },
        methods: {
            getVal: function (bol) {
                this.layerDisplay = bol;
            },
            getCounter: function (val) {
                this.remarkNum = val;
            },
            fn: function () {
                let media = document.getElementById("my_video");
             //   console.log(media);
            }
        }
    }
</script>

<style>
    #show_container {
    }

    #show_head {
        position: fixed;
        z-index: 1001;
        top: 0;
        left: 0;
        width: 100%;
    }

    #show_banner {
        width: 100%;
        padding-bottom: 80%;
        position: relative;
        margin: 0 auto;
        display: block;
    }

    #my_video {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: fill;
    }

    #show_banner_msg {
        width: 80%;
        max-width: 18rem;
        height: 2.8rem;
        position: absolute;
        z-index: 999;
        top: 3.3rem;
        left: 0;
        background-color: rgba(0,0,0,0.7);
        color: #FFF;
        padding: 0.3rem 0.6rem;
        border-top-right-radius: 1.0rem;
        border-bottom-right-radius: 1.0rem;
        font-size: 1.0rem;
        line-height: 1.4rem;
    }

    .show-label img{
        height: 18px;
        position: relative;
        top: 3px;
    }

    .dplayer-video-wrap {
        position: absolute;
    }
    .edit-component-container{
        bottom: 3.4rem !important;
    }
    #show_head{
        position: absolute;
    }
</style>